<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${isNotEmpty(companyShortName)?companyShortName:''}</title>
    <link rel="stylesheet" href="${ctxPath}/plugins/layui/css/layui.css">
    <script src="${ctxPath}/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="${ctxPath}/plugins/jquery/jquery.min.js?v=${jsVer}"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style rel="stylesheet" type="text/css">
        input{
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
            text-rendering: auto;
            letter-spacing: normal;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0;
            text-shadow: none;
            text-align: start;
            margin: 0;
        }

        input:-webkit-autofill{
            box-shadow: 0 0 0px 1000px white inset !important;
        }

        label{
            width: 80px;
            text-align:left;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .login {
            height: 100%;
            width: 100%;
            position: fixed;
            background-color: #fff9ec;
            background: url("${ctxPath}/img/1.jpg") no-repeat;
            background-size: 100%;
        }
        .center{
            /*border-radius: 20px;*/
            height: 510px;
            width: 502px;
            margin-top: 12%;
            margin-left:auto;
            margin-right:12%;
            background-color: #FFFFFF;
            position: relative;
        }
        .logo{
            position: absolute;
            margin-top: 50px;
            margin-left: 130px;
        }
        .logo span{
            font-size: 30px;
            font-family: "MicrosoftYaHei";
            color: #243177;
        }
        .form{
            width: 100%;
            height: 350px;
            position: absolute;
            margin-top: 155px;
        }
        .form img{
            height: 18px;
            width: 16px;
            margin-left: 80px;
            position: relative;
        }
        #code{
            position: absolute;
            margin-left: 96px;
            margin-top: -29px;
            border: none;
            width: 350px;
            font-size: 16px;
            font-family: "MicrosoftYaHei";
            color: #7d7b7b;
        }
        #password{
            position: absolute;
            margin-left: 96px;
            margin-top: -29px;
            border: none;
            width: 350px;
            font-size: 16px;
            font-family: "MicrosoftYaHei";
            color: #7d7b7b;
        }
        hr{
            margin-top: 15px;
            width: 350px;
            margin-left: 80px;
            border: 1px #7d7b7b;
        }
        .remPassword span{
            margin-top: 2px;
            margin-left: 5px;
            font-size: 16px;
            font-family: "MicrosoftYaHei";
            color: #7d7b7b;
        }

        .footer {
            margin-top: 170px;
            text-align: center;
        }

        .footer span {
            color: #e7e7e7;
            font-size: 14px;
            font-family: "MicrosoftYaHei";
        }

        .login-btn{
            width: 336px;
            height: 50px;
            color: #ffffff;
            /*background-color: #243177;*/
            background-color: #419DB9;
            border-color: #419DB9;
            /*border-color: #243177;*/
            display: inline-block;
            line-height: 0.6;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #dcdfe6;
            -webkit-appearance: none;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            -webkit-transition: .1s;
            transition: .1s;
            padding: 12px 20px;
            font-size: 20px;
            font-family: "MicrosoftYaHei";
            border-radius: 20px;
        }
    </style>
    <script>
        if (window.frames.length != parent.frames.length) {
            window.parent.location.replace(document.referrer);
        }

        let layer = null;
        layui.use(['layer'], function(){
            layer = layui.layer;

        });


        function vaild() {
            let code = document.getElementById('code').value;
            let password =  document.getElementById('password').value;
            if (code == null || code == ''){
                layer.msg('请输入账号');
                return false
            }
            if (password == null || password == ''){
                layer.msg('请输入密码');
                return false
            }
            return true;
        }
    </script>
</head>
<body onLoad="document.getElementById('code').focus();GetCookie();">
<div class="login">
    <div class="center">
        <div class="logo">
            <span>${isNotEmpty(companyShortName)?companyShortName:''}</span>
        </div>
        <form id="loginForm" class="form" action="${ctxPath}/login.do" method="post" onsubmit="return vaild()">
            <div class="form-item">
                <img src="${ctxPath}/img/icon_Username.png">
                <div class="form-item-content">
                    <input id="code" type="text" name="code" autocomplete="off" placeholder="请输入用户名">
                </div>
                <hr>
            </div>
            <div class="form-item" style="margin-top: 50px">
                <img src="${ctxPath}/img/icon_Password.png">
                <div class="form-item-content">
                    <input id="password" type="password" name="password" autocomplete="off" placeholder="请输入密码">
                </div>
                <hr>
            </div>
            <div class="form-item remPassword" style="margin-top: 50px">
                <img style="margin-top: -3px" id="checkedImg" src="${ctxPath}/img/icon_unchecked.png" onclick="changeImg()"><span>记住密码</span>
                <a href="javascript:;" id="forgetPwd" style="margin-left: 185px;"><span>重置密码</span></a>
                <a href="${ctxPath}/cms/aliLogin/login.do" id="threeLogin" style="float:right;margin-right: 66px;margin-top:20px"><span>第三方登录</span></a>
            </div>
            <div style="margin-top: 60px;margin-left: 80px">
                <input id="loginBtn" type="button" class="login-btn" value="登 录" OnClick="loginAdmin()">
            </div>
        </form>
        <div style="text-align: center;">
            <img id="cxb_login" src="" style="width: 50px;height: 50px;text-align: center;position: relative;top: 520px;display: none;">
        </div>
    </div>
    <!--<div style="text-align: center;">-->
        <!--<img id="cxb_login" src="" style="width: 50px;height: 50px;display: none;">-->
    <!--</div>-->

    <div class="footer">
        <span class="powered">${isNotEmpty(copyright)?copyright:''}</span>
    </div>
</div>

<script>
    var index;
    layui.use(['layer',"form","jquery"], function(){
        layer = layui.layer;

        initForgetPwd();
        function initForgetPwd(){
            var $ = layui.$;
            $("#forgetPwd").click(function () {
                index = layer.open({
                    closeBtn:1,
                    type: 1,
                    title:"找回密码",
                    area: ['550px','440px'],
                    id: 'LAY_layuipro', //设定一个id，防止重复弹出
                    resize: false,
                    moveType: 1, //拖拽模式，0或者1
                    content:
                        '<div class="layui-form-item" style="margin: 20px">'+
                            '<label>账&nbsp;&nbsp;号</label>'+
                            '<div class="form-item-content">'+
                                '<input id="userCode" name="userCode" class="layui-input" placeholder="请输入登录账号">'+
                        '   </div>'+
                        '</div>'+
                        '<div class="layui-form-item" style="margin: 20px">'+
                            '<label>密&nbsp;&nbsp;码</label>'+
                            '<div class="form-item-content">'+
                                '<input type="password" id="newPassword" name="newPassword" class="layui-input" placeholder="输入新密码">'+
                            '</div>'+
                        '</div>'+
                        '<div class="layui-form-item" style="margin: 20px">'+
                            '<div class="form-item-content">'+
                                '<input type="password" id="newPassword2" name="newPassword2"  class="layui-input" placeholder="确认新密码">'+
                            '</div>'+
                        '</div>'+
                        '<div class="layui-form-item" style="margin: 20px">'+
                            '<label>验&nbsp;证&nbsp;码</label>'+
                            '<div class="form-item-content">'+
                                '<div class="layui-inline">' +
                                    '<input id="verifyCode" class="layui-input" placeholder="输入验证码">'+
                                '</div>'+
                                '<div class="layui-inline">' +
                                    '<button id="getCode" class="layui-btn" onclick="return getCode()">获取验证码</button>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                        '<div class="layui-form-item" style="margin: 20px">'+
                        '<div class="form-item-content">'+
                        '<button class="layui-btn" onclick="return changePassword()">确认</button>'+
                        '   </div>'+
                        '</div>'
                });
            })
        }
    });

    /**
     * 获取验证码
     */
    function getCode(){
        var $ = layui.$;
        var userCode = $("#userCode").val();
        if(userCode === null || userCode === ''){
            layer.msg("账号不能为空！");
            return false;
        }
        $.ajax({
            url: "${ctxPath}/cms/smsInfo/getManageUserVerifyCode.json",
            type: "POST",
            data: {"userCode":userCode},
            success: function (rsp) {
                var msg= rsp.msg;
                if(rsp.code === 0){
                    layer.msg("发送"+msg+"!");
                }else{
                    layer.msg(msg);
                }
                settime();
            }
        });
        return true;
    }

    /**
     * 修改密码
     * @returns {boolean}
     */
    function changePassword() {
        var $ = layui.$;
        var userCode = $("#userCode").val();
        var verifyCode = $("#verifyCode").val();
        var password = $("#newPassword").val();
        var password2 = $("#newPassword2").val();
        if(password !== password2){
            layer.msg("密码不一致");
            return false;
        }
        if(verifyCode === null || verifyCode === '' || userCode === null || userCode === ''){
            layer.msg("手机号和验证码都不能为空！");
            return false;
        }
        if(password === null || password === ''){
            layer.msg("请输入密码");
            return false;
        }
        $.ajax({
            url: "${ctxPath}/cms/appUser/changePassword.json",
            type: "post",
            data: {"userCode": userCode, "verifyCode": verifyCode, 'password': password},
            success: function (rsp) {
                console.log(rsp);
                var msg= rsp.msg;
                if (rsp.code === 0) {
                    layer.close(index);
                    layer.msg("修改成功");
                }else{
                    layer.msg(msg);
                }
            }
        })
    }
    //倒计时
    var countdown = 30;
    function settime() {
        var $ = layui.$;
        var cb = $('#getCode');
        if (countdown == 0) {
            cb.removeAttr("disabled");
            cb.css({"background": "#1E9FFF"});
            cb.text("获取验证码");
            countdown = 30;
            return false;
        } else {
            cb.attr("disabled", true);
            cb.css({"background": "gray"});
            cb.text("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {
            settime();
        },1000);
    };

    /**
     * 记住密码图片切换
     */
    function changeImg(){
        var $ = layui.$;
        var srcname = $("#checkedImg").attr("src");
        if (srcname==="${ctxPath}/img/icon_selection.png") {
            $("#checkedImg").attr("src","${ctxPath}/img/icon_unchecked.png");
        }
        if (srcname==="${ctxPath}/img/icon_unchecked.png") {
            $("#checkedImg").attr("src","${ctxPath}/img/icon_selection.png");
        }
    }

    /**
     * 登入表单提交，记住密码验证
     */
    function loginAdmin(){
        var $ = layui.$;
        saveInfo();
        $("form").submit();
    }

    /**
     * 记住密码
     */
    saveInfo = function () {
        var $ = layui.$;
        try {
            var srcname = $("#checkedImg").attr("src");
            if (srcname==="${ctxPath}/img/icon_selection.png") {   //记住密码是否选中
                var code = document.getElementById('code').value;
                var password = document.getElementById('password').value;
                if (code != "" && password != "") {
                    SetCookie(code, password);
                }
            }else {
                SetCookie("", "");
            }
        } catch (e) {

        }
    };

    function SetCookie(code, password) {
        var Then = new Date();
        Then.setTime(Then.getTime() + 1866240000000);
        document.cookie = "username=" + code + "%%" + password + ";expires=" + Then.toGMTString();
    }

    function GetCookie() {
        var $ = layui.$;
        var nmpsd;
        var code;
        var psd;
        var cookieString = new String(document.cookie);
        var cookieHeader = "username=";
        var beginPosition = cookieString.indexOf(cookieHeader);
        cookieString = cookieString.substring(beginPosition);
        var ends = cookieString.indexOf(";");
        if (ends != -1) {
            cookieString = cookieString.substring(0, ends);
        }
        if (beginPosition > -1) {
            nmpsd = cookieString.substring(cookieHeader.length);
            if (nmpsd != "") {
                beginPosition = nmpsd.indexOf("%%");
                code = nmpsd.substring(0, beginPosition);
                psd = nmpsd.substring(beginPosition + 2);
                document.getElementById('code').value = code;
                document.getElementById('password').value = psd;
                if (code != "" && psd != "") {
                    $("#checkedImg").attr("src","${ctxPath}/img/icon_selection.png");
                }
            }
        }
    }


</script>
</body>
</html>